<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>JBone | 登录</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" th:href="@{/webjars/adminlte/2.3.11/bootstrap/css/bootstrap.min.css}" />
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" />
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" />
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/webjars/adminlte/2.3.11/dist/css/AdminLTE.min.css}" />
    <!-- iCheck -->
    <link rel="stylesheet" th:href="@{/webjars/adminlte/2.3.11/plugins/iCheck/square/blue.css}" />

</head>

<div class="login-box" id="login">
    <div class="login-box-body">
        <p class="login-box-msg" th:text="#{cas.login.pagetitle}"></p>
        <form method="post" id="fm1" th:object="${credential}" action="login">
            <div class="alert alert-danger" th:if="${#fields.hasErrors('*')}">
                <span th:each="err : ${#fields.errors('*')}" th:utext="${err}"/>
            </div>

            <h2 th:utext="#{screen.welcome.instructions}"></h2>

            <div class="form-group has-feedback">
                <div th:if="${openIdLocalId}">
                    <strong>
                        <span th:utext="${openIdLocalId}"/>
                    </strong>
                    <input type="hidden"
                           id="username"
                           name="username"
                           th:value="${openIdLocalId}"/>
                </div>
                <div th:unless="${openIdLocalId}">
                    <input class="required form-control"
                           id="username"
                           size="25"
                           tabindex="1"
                           type="text" th:placeholder="#{screen.welcome.label.netid}"
                           th:disabled="${guaEnabled}"
                           th:field="*{username}"
                           th:accesskey="#{screen.welcome.label.netid.accesskey}"
                           autocomplete="off"/>
                    <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                </div>
            </div>

            <div class="form-group has-feedback">
                <div>
                    <input class="required form-control"
                           type="password"
                           id="password"
                           size="25"
                           tabindex="2" th:placeholder="#{screen.welcome.label.password}"
                           th:accesskey="#{screen.welcome.label.password.accesskey}"
                           th:field="*{password}"
                           autocomplete="off"/>
                    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                    <span id="capslock-on" style="display:none;">
                        <p>
                            <i class="fa fa-exclamation-circle"></i>
                            <span th:utext="#{screen.capslock.on}"/>
                        </p>
                    </span>
                </div>
            </div>

            <section class="row check">
                <p th:if="${passwordManagementEnabled}">
                    <input type="checkbox" name="doChangePassword" id="doChangePassword" value="true" th:checked="${param.doChangePassword != null}" tabindex="4"/>
                    <label for="doChangePassword" th:text="#{screen.button.changePassword}"/>
                </p>
            </section>

            <section class="row check">
                <div th:if="${rememberMeAuthenticationEnabled}" class="checkbox icheck">
                    <label for="rememberMe">
                        <input type="checkbox" name="rememberMe"  id="rememberMe" value="true" tabindex="5"/>
                        <font th:text="#{screen.rememberme.checkbox.title}"></font>
                    </label>
                </div>
            </section>

            <section class="row" th:if="${recaptchaSiteKey}">
                <div class="g-recaptcha" th:attr="data-sitekey=${recaptchaSiteKey}"/>
            </section>

            <section class="row btn-row">
                <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                <input type="hidden" name="_eventId" value="submit"/>
                <input type="hidden" name="geolocation"/>

                <input class="btn btn-submit btn-block"
                       name="submit"
                       accesskey="l"
                       th:value="#{screen.welcome.button.login}"
                       tabindex="6"
                       type="submit"/>
            </section>
        </form>

        <form th:if="${passwordManagementEnabled}" method="post" id="passwordManagementForm">
            <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
            <input type="hidden" name="_eventId" value="resetPassword"/>
            <span class="fa fa-unlock"></span>
            <a th:utext="#{screen.pm.button.resetPassword}" href="javascript:void(0)" onclick="$('#passwordManagementForm').submit();"/>
            <p/>
        </form>

        <div th:unless="${passwordManagementEnabled}">
            <span class="fa fa-question-circle"></span>
            <span th:utext="#{screen.pm.button.forgotpwd}"/>
            <p/>
        </div>

    </div>



    <script type="text/javascript" th:inline="javascript">
        var i = [[#{screen.welcome.button.loginwip}]]
        $("#fm1").submit(function () {
            $(":submit").attr("disabled", true);
            $(":submit").attr("value", i);
            return true;
        });
    </script>
    <div th:replace="fragments/loginsidebar"/>
</div>

<!-- jQuery 3 -->
<script th:src="@{/webjars/adminlte/2.3.11/plugins/jQuery/jquery-2.2.3.min.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script th:src="@{/webjars/adminlte/2.3.11/bootstrap/js/bootstrap.min.js}"></script>
<!-- iCheck -->
<script th:src="@{/webjars/adminlte/2.3.11/plugins/iCheck/icheck.min.js}"></script>

<script>
    $(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' // optional
        });
    });
</script>